<template>
<div>
  <div style="display: flex; align-items: center; justify-content: flex-end; padding: 10px;">
    <el-input v-model="name" placeholder="请输入商品名称"  @keyup.enter.native="handleEnter" style="margin-top: 0px;"> <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    <div style="display: flex; align-items: center; margin-left: 10px; line-height: 40px; height: 40px;">
      <i class="el-icon-bell" style="color: #9f9a9a;font-size: 25px;z-index: 2"></i>
    </div>
  </div>
  <div>
    <div style="width: 90px; float: left; background-color: rgba(246, 246, 246, 1); height: calc(100vh - 110px); position: fixed; left: 0; top: 60px; overflow-y: auto;">
      <!-- 左边导航栏内容 -->
      <div style="text-align: center; height: 49px; line-height: 49px;" v-for="items in list" class="c1" @click="getCatgory(items.id)">
        {{items.name}}
      </div>
    </div>
    <div style="margin-left: 90px;">
      <!-- 右边内容 -->
      <div class="container">
        <div class="item" v-for="item in cats" :key="item.id" @click="router(item)">
          <div><img :src="item.img" style="width: 100%"></div>
          <div style="font-size: 13px">{{item.categoryName}}</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Vue from 'vue';
import { TreeSelect } from 'vant';
import { Image as VanImage } from 'vant';
import request from "../../utils/request";

Vue.use(VanImage);
Vue.use(TreeSelect);
export default {
  data(){
    return{
      list:[],
      cats:[],
    }
  },
  created() {
    this.getAllCatgroarys()
  },
  methods:{
    //回车全局搜索
    handleEnter(){
      this.$router.push({path:'/approduct',query:{name:this.name}})
    },
    //跳转商品页
    router(i){
      this.$router.push({
        name: 'approduct', // 商品页的路由名称
        query: {
          i: i.categoryId
        }
      });
    },
    //查询大分类
    getAllCatgroarys(){
      request.get('/productCategories/getAllCatgories').then(resp=>{
        this.list=resp.data
        this.getCatgory(1)
      })
    },
  //  通过大分类id获取小分类
    getCatgory(id){
      request.post('/productCategories/getSmalCat',{"id":id}).then(resp=>{
          this.cats=resp.data
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap; /* 当子元素超过一行时进行换行 */

}

.item {
  width: 33.33%; /* 将宽度设置为三分之一，实现一行显示三个内容 */
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}
.c1:hover{
  color: #da3a3a;
  background-color: white;
  border-left: 4px solid #da3a3a;
  font-weight: bold;
}
/* Chrome浏览器滚动条样式 */
::-webkit-scrollbar {
  width: 0px;  /* 设置滚动条宽度 */
  height: 0px;
  background-color: #f5f5f5;  /* 设置滚动条背景颜色 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  border: 0px solid #ccc;  /* 设置滚动条轨道边框 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #999;  /* 设置滚动条滑块颜色 */
  border: 1px solid #ccc;  /* 设置滚动条滑块边框 */
}
/* 滚动条hover状态 */
::-webkit-scrollbar-thumb:hover {
  background-color: #666;  /* 设置滚动条滑块hover状态下的颜色 */
}
/* 滚动条active状态 */
::-webkit-scrollbar-thumb:active {
  background-color: #333;  /* 设置滚动条滑块active状态下的颜色 */
}
>>> .el-input__inner{
  border-radius: 20px;
}
</style>
